  
  .app {
    display: flex;
    height: 100%;
  }
  .left-container {
    flex: 0 0 199px;
    border-right: 1px solid #eee;
    height: 100%;
  }
  .left-layout-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    background: #171717;
  } 
  .main-container {
    flex-grow: 1;
  }
  .left-user{ display: none; }
  ::-webkit-scrollbar{
    width:.3rem;
    height:.3rem;
    background-color:rgba(0,0,0,.02)
  }
  ::-webkit-scrollbar-track{
    border-radius:.15rem;
    box-shadow:inset .05rem .05rem .15rem rgba(0,0,0,.08)
  }
  ::-webkit-scrollbar-thumb{
    border-radius:.15rem;
    background-color:rgba(0,0,0,.1)
  }
  ::-webkit-scrollbar-thumb:hover{background-color:#3C6385}
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .app {
      display: block;
      height: 100%;
    }
    .left-container{
      flex: none;
      height: auto;
      border: none;
    }
    .left-layout-container{
      position: fixed;
      width: 15rem;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 9999;
      opacity: 1;
      &.pc{ display:none; }
    }
    .left-layout-bg{
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      background: #999;
      opacity: .5;
    }
    .left-menu{ display: none; }
    .left-user{ display: block; }
  }